<template>
	<view class="container">
		<view class="header">
			<!-- <image class="header_img" src="../../static/imgs/mine/sucess.png"></image> -->
			<view class="header-msg">
				<view class="header-msg_num">恭喜您，根据评分结果，您获得以下证书</view>
				<!-- <view class="header-msg_tips">我们已为您发放证书</view> -->
			</view>
		</view>
		<view class="rectangle">
			<image :src="details.cert"></image>
		</view>
		<view class="list">
			<view class="list-item">
				<view class="list-item-title">证书持有人</view>
				<view class="list-item-tips">{{details.name}}</view>
			</view>
			<view class="list-item">
				<view class="list-item-title">比赛阶段</view>
				<view class="list-item-tips">
					<text v-for="(item,index) in details.sections" :key="index" v-if="item.section_id==details.section_id">{{item.name}}</text>
				</view>
			</view>
			<view class="list-item">
				<view class="list-item-title">认证机构</view>
				<view class="list-item-tips">奥北体能</view>
			</view>
			<view class="list-item">
				<view class="list-item-title">证书编号</view>
				<view class="list-item-tips">{{details.code}}</view>
			</view>
		</view>
		<!-- <view class="button" @click="getPicture">保存证书到相册</view> -->
		<!-- <view class="header-msg_tips footer-tips">证书的具体信息可在“我的-我的证书”查看</view> -->
		<view class="startButton" @click="goApplication">开始新的阶段训练</view>
		<view class="header-msg_tips footer-tips" style="padding-bottom: 40rpx;">
			已完成
			<text v-for="(item,index) in details.sections" :key="index" v-if="item.section_id==details.section_id">{{item.name}}</text>
			阶段训练，也可以切换别的阶段开始新的训练
		</view>
		<!-- <view class="header-msg_tips footer-tips">
			证书的具体信息可在“我的-我的证书”查看，“切换阶段”可继续参与对应的训练，如果您需要纸质证书，请联系我们
		</view>
		<view class="certificate-box">
			<view>
				<view class="certificate-box-title">恭喜您，已完成了5岁-10岁阶段的体能训练</view>
				<view class="certificate-box-tips">您还可以继续选择其他阶段的训练</view>
			</view>
			<image src="../../static/imgs/mine/right.png"></image>
		</view> -->
	</view>
</template>

<script>
	export default {
		props:{
			details:Object,
		},
		data() {
			return {
				

			}
		},
		onLoad() {

		},
		methods: {
			getPicture() {
				uni.saveImageToPhotosAlbum({
					filePath: this.details.cert,
					success() {
						uni.showToast({
							position: "center",
							icon: "none",
							title: "图片保存成功，请到手机相册查看"
						})
					},
					fail(e) {
						uni.showModal({
							content: "保存相册失败，errCode：" + e.errCode + "，errMsg：" + e.errMsg +
								"，errSubject：" + e.errSubject,
							showCancel: false
						});
					}
				})
			},
			// 重新报名
			goApplication(){
				this.$emit('goApplication')
			},
		}
	}
</script>

<style lang="scss" scoped>
	// @import url("./index.scss");
	.container{
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}
	.header {
		background: #ffffff;
		height: 112rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 0!important;
	}
	.header-msg_tips{
		padding: 0 30rpx;
	}

	.header-msg_tips,
	.list-item-tips {
		color: $uni-text-color-opblack;
		line-height: 40rpx;

	}
	.list-item{
		width: 100%;
		height: 140rpx;
		background: #ffffff;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.list-item-tips{
		font-size: 24rpx;
		font-weight: 400;
		line-height: 34rpx;
	}
	.list-item-title{
		font-size: 32rpx;
		font-weight: bold;
	}
	.header-msg_num,
	.list-item-title {
		color: $uni-text-color-black;

		text {
			color: #FF6E00;
		}
	}
	.header-msg_num{
		text-align: center;
	}

	.header_img {
		width: 60rpx !important;
		height: 60rpx !important;
	}

	.header-msg_num {
		font-size: 24rpx;
		line-height: 34rpx;
		font-weight: bold;
	}

	.header-msg_tips {
		font-size: 24rpx;
		font-weight: 400;
	}

	.rectangle {
		background-color: #ffffff;
		display: flex;
		justify-content: center;

		image {
			width: 690rpx;
			height: 388rpx;
		}
	}

	.list-item {
		padding: 0 30rpx;
		width: calc(100% - 60rpx);
		height: 100rpx !important;
		margin-bottom: 2rpx;
	}

	.list-item[data-v-b7b58876]:nth-of-type(2) {
		margin-bottom: 2rpx !important;
	}

	.list-item-title {
		font-size: 32rpx;
		font-weight: 400;
	}

	.list-item-tips {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.button {
		width: 690rpx;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		border-radius: 10rpx;
		margin: 30rpx auto;
		color: #ffffff;
		font-size: 32rpx;
		font-weight: bold;
		background-color: #FF6E00;
	}
	.startButton{
		width: 690rpx;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		border-radius: 10rpx;
		margin: 30rpx auto;
		color: #FF6E00;
		font-size: 32rpx;
		font-weight: bold;
		border: 2rpx solid #FF6E00;
		background-color: #fff;
	}

	.footer-tips {
		text-align: center;
	}
	
	.certificate-box{
		padding: 14rpx 30rpx;
		width: calc(100% - 60rpx);
		background-color: #ffffff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 30rpx;
		image{
			width: 32rpx;
			height: 32rpx;
		}
		&-title{
			font-size: 24rpx;
			font-weight: bold;
			line-height: 34rpx;
		}
		&-tips{
			font-size: 24rpx;
			font-weight: 400;
			line-height: 40rpx;
		}
	}
</style>